import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { getTodoData } from '@/api/statistics'
import { Card, Col, Row } from 'ant-design-vue'
import { RightOutlined } from '@ant-design/icons-vue'

@Component
export class ToDoView extends Render {
    todoList = {
        periodAuditCount: {
            name: '长期保单位审批',
            value: 0,
            path: ''
        },
        dailyAuditCount: {
            name: '日日保单位审批',
            value: 0,
            path: ''
        },
        groupAuditCount: {
            name: '团意保单位审批',
            value: 0,
            path: ''
        },
        rechargeAudit: {
            name: '充值审批',
            value: 0,
            path: ''
        },
        balanceLack: {
            name: '日投余额不足',
            value: 0,
            path: ''
        },
    }

    async initData() {
        const res = await getTodoData()
        for(const key in this.todoList) {
            this.todoList[key as keyof typeof this.todoList].value = res[key as keyof typeof res]
        }
    }

    onMounted() {
        this.initData()
    }

    render() {
        return (
            <Card class="mb-16px">
                <div class="text-lg font-bold mb-20px">待处理</div>
                <Row justify="space-between">
                    {Object.values(this.todoList).map((i) => {
                        return (
                            <Col md={4} sm={24} class="px-4px py-6px cursor-pointer group hover:bg-blue-100 hover:bg-opacity-10 hover:rounded-sm">
                                <div class="flex justify-between items-center">
                                    <div class="text-xxl font-bold group-hover:text-blue-default">{i.value}</div>
                                    <RightOutlined />
                                </div>
                                <div class="text-sm text-black-300">{i.name}</div>
                            </Col>
                        )
                    })}
                </Row>
            </Card>
        )
    }
}

export default toNative<{}, {}>(ToDoView)
